<script setup>
defineProps({
  article: {
    type: Object,
    required: true,
    default: () => ({
      title: '',
      description: '',
      date: '',
      category: ''
    })
  }
});
</script>

<template>
  <div class="article-card" v-if="article">
    <div class="article-meta">
      <span class="date" v-if="article.date">{{ article.date }}</span>
      <span v-if="article.category" class="category">{{ article.category }}</span>
    </div>
    <h2 class="title">{{ article?.title || '无标题' }}</h2>
    <p v-if="article.description" class="description">{{ article.description }}</p>
    <div class="read-more">
      阅读全文 →
    </div>
  </div>
</template>

<style lang="scss" scoped>
.article-card {
  padding: var(--gap);
  background: var(--white);
  border-radius: var(--radius);
  margin-bottom: var(--gap);
  transition: all var(--transition-duration);
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
  }

  .article-meta {
    margin-bottom: var(--space);
    font-size: 14px;
    color: #666;

    .date {
      margin-right: var(--gap);
    }

    .category {
      color: var(--primary-color);
    }
  }

  .title {
    margin-bottom: var(--space);
  }

  .description {
    color: #666;
    margin-bottom: var(--gap);
    line-height: 1.6;
  }

  .read-more {
    color: var(--primary-color);
    
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>